
:root{
  --primary-color: royalblue;
}
:host {
  display: inline-flex;
  --primary-color-opacity-100: color-mix(in srgb, var(--primary-color) 10%, transparent);
  --primary-color-opacity-200: color-mix(in srgb, var(--primary-color) 20%, transparent);
  --primary-color-opacity-600: color-mix(in srgb, var(--primary-color) 60%, transparent);
}

@supports not (color: color-mix(in srgb, red, pink)) {
  :host {
    --primary-color-opacity-100: rgba(255, 119, 117, 0.1);
    --primary-color-opacity-200: rgba(255, 119, 117, 0.2);
    --primary-color-opacity-600: rgba(255, 119, 117, 0.6);
  }
}


.button{
  position: relative;
  display: flex;
  width: -webkit-fill-available;
  width: -moz-available;
  gap: 4px;
  padding: 4px 15px;
  box-sizing: border-box;
  height: var(--height-base, 32px);
  align-items: center;
  justify-content: center;
  background-color: var(--primary-bg, #fff);
  /* border: 1px solid var(--border-color, #d9d9d9); */
  border: 1px solid transparent;
  font-size: var(--font-size, 14px);
  color: var(--text-color, rgba(0, 0, 0, .88));
  border-radius: var(--border-radius-base, 4px);
  outline-color: var(--primary-color-opacity-600);
  outline-width: 2px;
  outline-offset: 1px;
  transition: var(--transition, .2s);
}





:host([disabled]) {
  pointer-events: none;
}

:host([type=primary]) .button{
  color: #fff;
  border: 0;
  background: var(--primary-color,#1E90EF);
}


:host(:not([disabled])) .button:not(:disabled):hover{
  z-index: 1;
}


:host([size=small]) .button{
  font-size: var(--font-size-sm, 12px);
  height: var(--height-sm, 24px);
  padding: 0 7px;
}

:host([size=large]) .button{
  font-size: var(--font-size-lg, 16px);
  height: var(--height-lg, 40px);
  padding: 6px 15px;
  border-radius: 8px;
}



:host(:not([disabled])) .button:not(:disabled){
  cursor: pointer;
}

/* 自己新增实体的话 */
:host([type=common]) button {
  /* color:#ff7875; */
  background: #31d06e;
  color: white;
}
:host(:not([type=primary],[loading],[disabled],[type=danger],[type="common"])) .button:hover{
  color: var(--primary-color, #1E90EF);
  border: var(--primary-color,#1E90EF) 1px solid;
  
}

:host([type=danger]) button {
  /* color:#ff7875; */
  background: #ff7875;
  color: white;
}

:host(:is([disabled],[loading])) .button:disabled{
  opacity: .8;
  cursor:not-allowed !important
}

